<template>
	<view :style="diyData.config?.style" v-if="diyData" class="diy-page">
		<dk-diy-box :item="item" v-for="(item,index) in diyData.rule" >
			<!-- 标题 -->
			<DkMinTitle v-if="item.type === 'DkMinTitle'" v-bind="item.props"></DkMinTitle>
			<!-- 空白 -->
			<DkMinBlank v-else-if="item.type === 'DkMinBlank'" v-bind="item.props"></DkMinBlank>
			<!-- 视频 -->
			<DkMinVideo v-else-if="item.type === 'DkMinVideo'" v-bind="item.props"></DkMinVideo>
			<!-- 富文本 -->
			<DkMinTextarea v-else-if="item.type === 'DkMinTextarea'" v-bind="item.props"></DkMinTextarea>
			<!-- 热图 -->
			<DkMinHotArea v-else-if="item.type === 'DkMinHotArea'" v-bind="item.props"></DkMinHotArea>
			<!-- 轮播 -->
			<DkMinSwiperImage v-else-if="item.type === 'DkMinSwiperImage'" v-bind="item.props"></DkMinSwiperImage>
			<slot :item="item" v-else></slot>
		</dk-diy-box>
	</view>
</template>


<script>
	import DkMinTitle from './views/DkMinTitle.vue'
	import DkMinBlank from './views/DkMinBlank.vue'
	import DkMinVideo from './views/DkMinVideo.vue'
	import DkMinTextarea from './views/DkMinTextarea.vue'
	import DkMinHotArea from './views/DkMinHotArea.vue'
	import DkMinSwiperImage from './views/DkMinSwiperImage.vue'

	export default {
		components: {
			DkMinTitle,
			DkMinBlank,
			DkMinVideo,
			DkMinTextarea,
			DkMinHotArea,
			DkMinSwiperImage
		},
		name: 'DkDiyPage',
		props: {
			diyData: {
				type: Object,
				default: null
			}
		},
		data() {
			return {
			}
		},
		methods: {
		}
	}
</script>

<style scoped lang="scss">
	.diy-page{
		background-size: 100% auto !important;
		    overflow: visible;
		    background-repeat: no-repeat;
		    background-origin: initial;
		    background-clip: initial;
	}
</style>